import NotAccessPage from '@/components/NotAccessPage';
import TableInstruct from '@/pages/instruct/table/TableInstruct';
import { DatabaseOutlined, FileSyncOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Badge, Card, Layout, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useState } from 'react';
import { useAccess } from 'umi';

export default (): React.ReactNode => {
  const access = useAccess();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('all');

  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  const menuList = () => {
    if (currentUser?.permissions.includes('instruct:page')) {
      return access.宣传指令x配置x管理员
        ? [
          {
            label: <span>全部{renderBadge(0, tabActiveKey === 'all')}</span>,
            key: 'all',
            icon: <DatabaseOutlined />,
          },
          {
            label: <span>我发布的{renderBadge(0, tabActiveKey === 'my')}</span>,
            key: 'my',
            icon: <FileSyncOutlined />,
          },
          {
            label: <span>其他发布{renderBadge(0, tabActiveKey === 'other')}</span>,
            key: 'other',
            icon: <FileSyncOutlined />,
          },
        ]
        : [
          {
            label: <span>全部{renderBadge(0, tabActiveKey === 'all')}</span>,
            key: 'all',
            icon: <DatabaseOutlined />,
          },
          {
            label: <span>进行中{renderBadge(0, tabActiveKey === 'progress')}</span>,
            key: 'progress',
            icon: <DatabaseOutlined />,
          },
          {
            label: <span>已结束{renderBadge(0, tabActiveKey === 'end')}</span>,
            key: 'end',
            icon: <DatabaseOutlined />,
          },
        ]
    } else {
      return []
    }
  }
  return (
    <Layout
      hasSider
      style={{
        backgroundColor: '#F7F7F7',
        padding: '15px',
        height: '100%',
      }}
    >
      <Layout.Sider
        width={300}
        style={{
          backgroundColor: '#F7F7F7',
          overflow: 'auto',
          height: '100%',
          position: 'fixed',
          paddingBottom: 30,
        }}
      >
        <Card
          style={{
            height: '100%',
          }}
          bordered={false}
          styles={{
            body: {
              padding: '8px 15px 15px',
            },
          }}
        >
          <span
            style={{
              fontSize: 14,
              display: 'flex',
              justifyContent: 'center',
              padding: 5,
              fontWeight: 'bold',
            }}
          >
            宣传工作指令
          </span>
          <Menu
            onSelect={(info: SelectInfo) => {
              setTabActiveKeyState(info.key);
            }}
            style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
            defaultSelectedKeys={[tabActiveKey]}
            mode="vertical"
            items={menuList()}
          />
        </Card>
      </Layout.Sider>
      <Layout.Content style={{ marginLeft: '315px' }}>
        <div
          style={{
            width: 'calc(100% - 315px)',
            height: '100%',
            position: 'fixed',
            paddingBottom: 30,
            paddingRight: 30,
          }}
        >
          <Card
            style={{
              height: '100%',
              overflow: 'auto',
            }}
            styles={{
              body: {
                padding: '8px',
              },
            }}
          >
            {currentUser?.permissions.includes('instruct:page') ? <TableInstruct brainType={tabActiveKey} /> : <NotAccessPage />}
          </Card>
        </div>
      </Layout.Content>
    </Layout>
  );
};